<script>
  import {onMount} from 'svelte';
  import List from '../components/list.svelte';
  import Btn from '../components/btn.svelte';
  import QueryBar from '../components/queryBar.svelte';
  import Paging from '../components/paging.svelte';
  import Query from '../model/query.js';
  import {Post} from '../lib/net.js';
  import {PlatformAssetList, AgentList,SearchAgent,Commission} from '../api.js';

  let listData = {
    title: [ "用户UID", "姓名", "手机号","邮箱","身份证号码", "代理人","总资产", "总入金","总出金","合约已实现盈亏",
			"合约手续费","合约账户可用余额","合约账户冻结","合约账户持仓","法币账户可用余额","法币账户冻结","返佣比例(%)","返佣金额"],
    data: []
  }
  let map_type = ["充值", "提币", "划转", "划转", "盈利", "赔付"];
  let map_state = ["待审核", "进行中", "已完成", "已取消", "提现拒绝"];
  let query = new Query();
  let balance = 0
  let total = 0
  let balance_balance = 0
  let balance_freeze = 0
  let contract_available = 0
  let contract_freeze = 0
	let balance_available=0

    let filter = false;
    let _e;

  onMount(() => {
    getList();
  });

  // 普通用户
  async function getList(e) {

    if (e) {
        _e = e;
      query.start = e.detail.start
      query.end = e.detail.end
      if (e.detail.types !== 1) {
                let ret = await Post(SearchAgent, {
                    type: e.detail.types,
                    condition: query.condition,
                });
                query.condition = "";
                query.admin = ret
                if(query.admin == -100) return
      }
    }

    let ret = await Post(PlatformAssetList + "?filter=" + filter, query);
    query.total = ret.total;
    query.page = ret.page;
    balance = ret.Extra.balance
    total = ret.Extra.total
		// total=0
    balance_available = ret.Extra.balance_available
    balance_balance = ret.Extra.balance_balance
    balance_freeze = ret.Extra.balance_freeze
    contract_available = ret.Extra.contract_available
    contract_freeze = ret.Extra.contract_freeze
    let data = [];
    for (let item of ret.list) {
      let arr = [
      item.user.id, 
      item.user_info.name, 
      item.user.phone,
      item.user.email,
      item.user_info.id,
      item.user.inviteCode,
      item.asset.total,
      item.extra.in,
      item.extra.out,
      item.extra.income,item.extra.fee,
	  item.asset.contract.available,
      (Number(item.asset.contract.hold) + Number(item.asset.contract.entrust)).toFixed(2),
      item.asset.contract.hold,
      item.asset.balance.available,
      (Number(item.asset.balance.freezeForSell)+Number(item.asset.balance.freezeForRefound)).toFixed(2),
	  //<textarea class="textarea" style="resize:none;height: 30px;font-size: 12px" rows=1 cols=4></textarea> 
	  `<input class="input" style="width: 80px;height:1.5rem" type="number" onblur="commission(${item.user.id})" data-id="${item.user.id}"  placeholder="0-100" oninput="if(value > 100 || value < 0 ){value = ''}" value="${item.user.commission}">`,
	  item.user.commissionAmount?item.user.commissionAmount:'0.00'
      ]
      arr.href = "/platform/assets/detail" + "?tid=" + item.tid;
      data.push(arr);
      //console.log(data)
    }
    listData.data = data;
  }

  window.commission = async function(id){
      let val = event.target.value;
	  if(val<0||val>100){
		  return
	  }
      await Post(Commission,{
          id: Number(id),
          commission: parseInt(val)
      })
  }
  
  function setPage(page) {
    query.page = page;
    getList();
  }

  function filter10usdt(){
    filter = this.checked;
    getList(_e);
    console.log(filter)
  }


  // var inputU = document.getElementsByClassName("inputU"); //box.value; //返回undefined

  //   console.log(inputU)
  //   console.log(inputU[0].checked)

</script>

<div class="view">
		<div class="borderRadius4 container" style="margin:0">
				<div class="columns rowReverse" style="padding: 20px;">
						<div class="column is-4">
								<!--//-->
								<div class="rowNumCenter">
										<span class="left1">用户数量：</span>
										<span class="mid1" style="color:forestgreen">{total}</span>
										<span class="left1">人</span>
								</div>
								<!--//-->
								<div class="rowNumCenter">
										<span class="left1">资金总计：</span>
										<span class="mid1" style="color:forestgreen">{Number(balance).toFixed(2)}</span>
										<span class="left1">USDT</span>
								</div>
								<!--//-->
								<div class="rowNumCenter">
										<span class="left1">法币账户可用余额：</span>
										<span class="mid1" style="color:forestgreen">{Number(balance_available).toFixed(2)}</span>
										<span class="left1">USDT</span>
								</div>
								<!--//-->
								<div class="rowNumCenter">
										<span class="left1">法币账户冻结：</span>
										<span class="mid1" style="color:forestgreen">{Number(balance_freeze).toFixed(2)}</span>
										<span class="left1">USDT</span>
								</div>
								<!--//-->
								<div class="rowNumCenter">
										<span class="left1">合约账户可用余额：</span>
										<span class="mid1" style="color:forestgreen">{Number(contract_available).toFixed(2)}</span>
										<span class="left1">USDT</span>
								</div>
								<!--//-->
								<div class="rowNumCenter">
										<span class="left1">合约账户冻结：</span>
										<span class="mid1" style="color:forestgreen">{Number(contract_freeze).toFixed(2)}</span>
										<span class="left1">USDT</span>
								</div>
						</div>
				</div>
		</div>
		
		
		
		<!--<div class="k-loadingF"></div>-->
		
		
		<div class="container">
				<QueryBar query={query} on:message={getList}/>
        <div class="containerHold" >
            <label class="checkbox">
                <input class="inputU" type="checkbox"  value="1" on:change={filter10usdt}>
                    10 U
            </label>
        </div>
		</div>
        <!-- overflow: auto; -->
		<div class="container gundong" style="margin-top: -10px;">
				<List data={listData}/>
		</div>
		<!-- display:none -->
		<div class="container rowReverse">
				{#if query.total !== 0}
				<Paging page={query} handler={setPage}/>
                {/if}
		</div>

</div>
<style>
		.borderRadius4{
			border-radius: 4px;
		}
		.container {
			/*width: 100%;*/
			/*overflow-x: auto;*/
			margin: 20px 5px;
		}
		.rowNumCenter{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			font-size: 12px;
		}

		.containerHold {
			margin: 20px 1%;
			width: 50px;
			position: absolute;
			top: 20%;
		}
		
		
		
		
		@media (min-width: 1441px){
			.containerHold {
				right: 2%;
			}
			/* .gundong{
				height: 580px;
			} */
		} /*>=1440的设备*/
		@media (max-width: 1440px){
			.containerHold {
				right: -5px;
			}
			/* .gundong{
				height: 380px;
			} */
		} /*<1440的设备*/
		
		
		/*loading设置*/
		@keyframes loadingF{
			50%{transform:rotate(180deg)}
			100%{transform:rotate(360deg)}
		}
		.k-loadingF{
			width:7px;
			height:7px;
			margin:0 auto;
			padding:7px;
			border:7px dashed orange;
			border-radius:50%;
			animation:loadingF 4s infinite;
		} 
</style>
